<template>
  <div class="app-container">
    <div class="designer" style="height: 100%">
      <div v-show="!showSendMessage && !showSendTemplateMessage">
            <el-tabs v-model="currentTab">
                <el-tab-pane label="普通消息" name="normal" />
                <el-tab-pane label="系统消息模板" name="template" />
            </el-tabs>
            <div v-show="currentTab==='normal'">
                <!-- 普通消息 -->
                <div style="marginBottom: 20px">
                    <el-input v-model="searchText" placeholder="请输入要查询的关键字" size="small" style="width: 200px">
                    </el-input>
                    <el-button style="marginLeft: 10px" type="primary" size="small" @click="searchChange">搜索</el-button>
                    <el-button style="marginLeft: 10px" size="small" @click="reset">重置</el-button>
                    <div style="float: right">
                    <el-button type="primary" icon="el-icon-plus" size="small" @click="sendMessage">发送新消息</el-button>
                    </div>
                </div>
                <el-table ref="multipleTable" :data="tableData" stripe class="tableInfo" size="small" highlight-current-row
                     v-loading="tableLoading" row-key="id" style="marginBottom: 20px"
                    @filter-change="filterChange"
                    @sort-change="changeTableSort"
                     >
                    <el-table-column type="selection" width="80" align="center" :reserve-selection="true">
                    </el-table-column>
                    <el-table-column label="序号" width="80" align="center">
                        <template slot-scope="scope">
                            <span>{{scope.$index+(page.pageNo-1)*page.pageSize+1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" label="消息标题" align="center" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span> {{scope.row.title}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="contentDisplay" label="消息内容" align="center" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span>{{scope.row.contentDisplay}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" label="消息类型" align="center" show-overflow-tooltip 
                        column-key="type" 
                        :filters="messageTypeList"
                        >
                        <template slot-scope="scope">
                            <span>{{messageTypeList.filter((_) => _.value == scope.row.type)[0].text}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" align="center" show-overflow-tooltip
                        column-key="state"
                        :filters="[{ text: '未发送', value: 0 },{ text: '已发送', value: 1 },{ text: '已撤回', value: 2 }]"
                    >
                         <template slot-scope="scope">
                            <span>{{statusType.filter((_) => _.id == scope.row.status)[0] && statusType.filter((_) => _.id == scope.row.status)[0].name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" align="center" show-overflow-tooltip sortable>
                          <template slot-scope="scope">{{
                            getDateTime(scope.row.createTime)
                        }}</template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">    <!-- 未发送：编辑，删除。已发送：发送详情，撤回，查看 -->
                    <template slot-scope="scope">
                        <el-button size="small" type="text" @click="editForm(scope.row)" v-show="scope.row.status =='0' || scope.row.status =='2'">
                            <el-link type="primary">编辑</el-link>
                        </el-button>
                        <el-button size="small" type="text" @click="delForm(scope.row)"  v-show="scope.row.status =='0' || scope.row.status =='2'">
                            <el-link type="primary">删除</el-link>
                        </el-button>
                        <el-button size="small" type="text" @click="sendForm(scope.row)"  v-show="scope.row.status =='1'">
                            <el-link type="primary">发送详情</el-link>
                        </el-button>
                        <el-button size="small" type="text" @click="detailsForm(scope.row)"   v-show="scope.row.status =='1'">
                            <el-link type="primary">查看</el-link>
                        </el-button>
                        <el-button size="small" type="text" @click="withdrawForm(scope.row)"  v-show="scope.row.status =='1'">
                            <el-link type="primary">撤回</el-link>
                        </el-button>
                    </template>
                    </el-table-column>
                </el-table>
                 <el-pagination background :layout="layout" :total="messagepageTotal" :page-size="messagePage.pageSize" :page-sizes="pageSizes"
                    :current-page="messagePage.pageNo" style="float: right;marginBottom: 20px" @size-change="sizeMyChange" @current-change="currentMyChange">
                </el-pagination>
            </div>
            <div v-show="currentTab==='template'">
                <!-- 系统消息模板 -->
                <div style="marginBottom: 20px">
                    <el-input v-model="searchTextTemplate" placeholder="请输入要查询的关键字" size="small" style="width: 200px">
                    </el-input>
                    <el-button style="marginLeft: 10px" type="primary" size="small" @click="searchTemplateChange">搜索</el-button>
                    <el-button style="marginLeft: 10px" size="small" @click="resetTemplate">重置</el-button>
                    <div style="float: right">
                    <el-button type="primary" icon="el-icon-plus" size="small" @click="sendTemplateMessage">新增消息模板</el-button>
                    </div>
                </div>
                <el-table ref="multipleTable" :data="tableTemplateData" stripe class="tableInfo" size="small" highlight-current-row
                    v-loading="tableTemplateLoading" row-key="id" style="width: 100%; marginBottom: 20px"
                    @filter-change="filterChangeTemplate"
                    @sort-change="changeTableSortTemplate"
                    >
                    <el-table-column type="selection" width="80" align="center" :reserve-selection="true">
                    </el-table-column>
                    <el-table-column label="序号" width="80" align="center">
                        <template slot-scope="scope">
                            <span>{{scope.$index+(page.pageNo-1)*page.pageSize+1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" label="消息标题" align="center" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span> {{scope.row.title}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="content" label="消息内容" align="center" >
                          <template slot-scope="scope">
                            <span v-html="scope.row.content"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" label="消息类型" align="center" show-overflow-tooltip
                         column-key="type" 
                        :filters="systemMessageType"
                     >
                        <template slot-scope="scope">{{
                            systemMessageType.filter((_) => _.value == scope.row.type)[0] && systemMessageType.filter((_) => _.value == scope.row.type)[0].text
                        }}</template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" align="center" show-overflow-tooltip sortable>
                        <template slot-scope="scope">{{
                            getDateTime(scope.row.createTime)
                        }}</template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" @click="editTemplateForm(scope.row)">
                            <el-link type="primary">编辑</el-link>
                        </el-button>
                        <el-button size="small" type="text" @click="sendTemplatForm(scope.row)">
                            <el-link type="primary">发送详情</el-link>
                        </el-button>
                    </template>
                    </el-table-column>
                </el-table>
                <el-pagination background :layout="layout" :total="pageTotal" :page-size="page.pageSize" :page-sizes="pageSizes"
                    :current-page="page.pageNo" style="float: right;marginBottom: 20px" @size-change="sizeChange" @current-change="currentChange">
                </el-pagination>
            </div>
      </div>
    </div>
    <!-- 发送新消息 -->
    <sendMessage v-if="showSendMessage"
        @returnTable="componentReturnTable"
        @saveMessage="saveMessage"
        :messageTitle="this.messageTitle"
        :editList="this.editList"
        :messageTypeList ='this.messageTypeList'
        :detailsMessage="this.detailsMessage"
        ref="announcement"
    />
    <!-- 新增消息模板 -->
    <sendTemplateMessage v-show="showSendTemplateMessage"
        @returnTemplateTable="componentTemplate"
        @saveTemplate="saveTemplate"
        :systemMessageType="systemMessageType"
        :templateEditList="this.templateEditList"
        :templateTitle="this.templateTitle"
        ref="templateMessage"
    />
    <!-- 普通消息--消息发送详情 -->
    <el-dialog title="消息发送详情" :visible.sync="openMessage" append-to-body >
        <div style="marginBottom: 50px">
             <div style="marginBottom: 20px">
                <el-input v-model="searchTextsend" placeholder="请输入发送用户搜索" size="small" style="width: 200px">
                </el-input>
                <el-button style="marginLeft: 10px" type="primary" size="small" @click="searchChangeSend">搜索</el-button>
                <el-button style="marginLeft: 10px" size="small" @click="resetSend">重置</el-button>
            </div>
            <el-table ref="multipleTable" :data="tableDataSend" stripe style="width: 100%; marginBottom: 20px" size="small"
                 v-loading="tableSendLoading" class="tableInfo" row-key="id">
                <el-table-column type="selection" width="80" align="center" :reserve-selection="true">
                </el-table-column>
                <el-table-column label="序号" width="80" align="center">
                    <template slot-scope="scope">
                    <span>{{
                        scope.$index + (page.pageNo - 1) * page.pageSize + 1
                    }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="username" label="发送用户" align="center">
                </el-table-column>
                <el-table-column prop="state" label="状态" align="center"  >
                    <template slot-scope="scope">
                        <span>{{stateList.filter((_) => _.value ==scope.row.state)[0] && stateList.filter((_) => _.value ==scope.row.state)[0].text}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="发送时间" align="center">
                       <template slot-scope="scope">{{
                            getDateTime(scope.row.createTime)
                        }}</template>
                </el-table-column>
                <el-table-column prop="readTime" label="更新时间" align="center">
                       <template slot-scope="scope">{{
                            getDateTime(scope.row.readTime)
                        }}</template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" @click="delSendForm(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
             <el-pagination background :layout="layout" :total="sendpageTotal" :page-size="sendPage.pageSize" :page-sizes="pageSizes"
                    :current-page="sendPage.pageNo" style="float:right;marginBottom:20px;" @size-change="sizeSendChange" @current-change="currentSendChange">
            </el-pagination>
        </div>
    </el-dialog>
    <!-- 系统消息模板--消息发送详情 -->
    <el-dialog title="消息发送详情" :visible.sync="openTemplateMessage" append-to-body>
        <div style="marginBottom: 50px">
             <div style="marginBottom: 20px">
                <el-input v-model="searchTextsendTemplate" placeholder="请输入发送用户搜索" size="small" style="width: 200px">
                </el-input>
                <el-button style="marginLeft: 10px" type="primary" size="small" @click="searchChangeTemplate">搜索</el-button>
                <el-button style="marginLeft: 10px" size="small" @click="resetSendTemplate">重置</el-button>
            </div>
            <el-table ref="multipleTable" :data="messageSendDtailsData" stripe style="width: 100%; marginBottom: 20px" size="small"
                v-loading="messageSendDtailsLoading" class="tableInfo"  row-key="id">
                <el-table-column type="selection" width="50" align="center" :reserve-selection="true">
                </el-table-column>
                <el-table-column label="序号" width="50" align="center">
                    <template slot-scope="scope">
                    <span>{{
                        scope.$index + (page.pageNo - 1) * page.pageSize + 1
                    }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="username" label="发送用户" align="center">
                </el-table-column>
                 <el-table-column prop="contentDisplay" label="消息内容" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>{{scope.row.contentDisplay}}</span>
                    </template>
                </el-table-column>
                   <el-table-column prop="state" label="状态" align="center" >
                    <template slot-scope="scope">
                        <span>{{stateList.filter((_) => _.value ==scope.row.state)[0] && stateList.filter((_) => _.value ==scope.row.state)[0].text}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="发送时间" align="center">
                     <template slot-scope="scope">{{
                            getDateTime(scope.row.createTime)
                        }}</template>
                </el-table-column>
                <el-table-column prop="readTime" label="更新时间" align="center">
                     <template slot-scope="scope">{{
                            getDateTime(scope.row.readTime)
                        }}</template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" @click="delTemplateForm(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background :layout="layout" :total="messageSendDtailsPageTotal" :page-size="messageSendDtailsPage.pageSize" :page-sizes="pageSizes"
                    :current-page="messageSendDtailsPage.pageNo" style="float:right;marginBottom:20px;" @size-change="sizeSendDtailsChange" @current-change="currentSendDtailsChange">
            </el-pagination>
        </div>
    </el-dialog>
  </div>

</template>


<script>
import SendMessage from './sendMessage.vue'
import SendTemplateMessage from './sendTemplateMessage.vue'
import { getTemplateList, getAnnouncement, delAnnouncement, withdrawAnnouncement, getAnnouncementSend, delSend, getTemplatePage, 
getMessageListByDictType
} from '@/api/custom/message'
import {DICT_TYPE, getDictDatas} from "@/utils/dict";

export default {
    name: 'message',
    components: {
        SendMessage,
        SendTemplateMessage
    },
    data() {
        return {
            tableLoading: false,
            currentTab: "normal",
            searchText: '', //关键字搜索
            searchTextTemplate: '', //模板关键字
            tableData: [], //表格数据
            tableTemplateData: [], //系统消息模板
            tableDataSend: [], //普通消息 发送详情
            showSendMessage: false, //显示发送消息
            showSendTemplateMessage: false, //显示消息模板
            openMessage: false,  //普通消息 发送详情
            searchTextsend: '',
            openTemplateMessage: false,
            searchTextsendTemplate: '', //消息模板 发送详情
            tableTemplateLoading: false, // 系统模板loading
            layout: 'prev, pager, next,sizes,jumper', //分页显示布局
            pageSizes: [10, 20, 30, 50], //分页显示每页条数选择
            pageTotal: 1,
            messagepageTotal: 1,
            sendpageTotal: 1,
            page: {
                pageNo: 1, // 当前页数
                pageSize: 10 // 每页显示多少条
            },
            messagePage: {
                pageNo: 1, // 当前页数
                pageSize: 10 // 每页显示多少条
            },
            sendPage: {
                pageNo: 1, // 当前页数
                pageSize: 10 // 每页显示多少条
            },
            messageType: [
                {id:0, type: 0, name: '系统消息'},
                {id:1, type: 1, name: '公告'},
                {id:2, type: 2, name: '新闻'},
                {id:3, type: 3, name: '会议'},
                {id:4, type: 4, name: '通知'},
            ],
            templateEditList: {}, // 编辑消息模板
            editList: {},  //编辑消息
            templateTitle: '',
            messageTitle: '',
            statusType: [
                {id: 0,name: '未发送'},
                {id: 1,name: '已发送'},
                {id: 2,name: '已撤回'},
            ],
            tableSendLoading: false,
            stateList: [
              { text: '未读', value: 0 },{ text: '已读', value: 1 }
            ],
            sendId: '',
            sendDtailsId: '',
            detailsMessage: false,
            messageSendDtailsData: [],
            messageSendDtailsLoading: false,
            messageSendDtailsPageTotal: 1,  //消息发送详情
            messageSendDtailsPage: {
                pageNo: 1, // 当前页数
                pageSize: 10 // 每页显示多少条
            },
            sortArrData: '',
            type: [],
            state: [],
            messageTypeList: [],
            systemMessageType: [],
            types: [],
            sortord: ''
        };
    },
    mounted() {
        this.getMessageList()
        this.getList()
        this.getMessageType()
        this.getSysType()
    },
    methods: {
        changekey(arr){
            arr.forEach(iterator=> {
                iterator['text'] = iterator.label; 
                delete iterator.label; //将修改的旧属性名删除
            })
            return arr
        },
        getMessageType(){
            getMessageListByDictType('message_type').then((res) => {
                if(res.code === 0){
                    this.messageTypeList = this.changekey(res.data)
                }   
            })
        },
        getSysType() {
            getMessageListByDictType('system_message_type').then((res) => {
                if(res.code === 0){
                    this.systemMessageType = this.changekey(res.data)
                }   
            })
        },
        filterChangeTemplate(val) {
            for (const key in val) {
                this.types = val[key];
            }
            this.page.pageNo = 1;
            this.getList();
        },
        changeTableSortTemplate({ column, prop, order }) {
            let sortSign = "";
            if (order == "descending") {
                sortSign = "DESC";
                this.sortord = sortSign
            } else {
                sortSign = "ASC";
                this.sortord = sortSign
            }
            this.page.pageNo = 1;
            this.getList();
        },
        filterChange(val){
            for (const key in val) {
                if(key == "type"){
                    this.type = val[key];
                }else if(key == "state"){
                    this.state = val[key];
                }
            }
            this.messagePage.pageNo = 1;
            this.getMessageList(); //获取数据的接口
        },
        changeTableSort({ column, prop, order }) {
            let sortSign = "";
            if (order == "descending") {
                sortSign = "DESC";
                this.sortArrData = sortSign
            } else {
                sortSign = "ASC";
                this.sortArrData = sortSign
            }
            this.messagePage.pageNo = 1;
            this.getMessageList(); //获取数据的接口
        },
        detailsForm(row) { //普通消息查看
            this.editList = row
            this.messageTitle = "查看消息"
            this.showSendMessage = true
            this.detailsMessage = true
        },
        // 新增普通消息
        saveMessage() {
            this.showSendMessage = false
            this.messagePage.pageNo = 1;
            this.getMessageList()
        },
        //普通消息列表
        getMessageList() {
            this.tableLoading = true;
            let params = {
                statusList : this.state,
                types: this.type,
                sortord: this.sortArrData,
                ...this.messagePage,
                value: this.searchText,
            };
           getAnnouncement(params).then((res) => {
               if (res.code === 0) {
                    this.tableData = res.data.list;
                    this.messagepageTotal = res.data.total;
                    this.tableLoading = false;
               }
           })
        },
        sizeMyChange(pageSize) {
            this.messagePage.pageSize = pageSize;
            this.messagePage.pageNo = 1;
            this.tableLoading = true;
            this.getMessageList();
        },
        currentMyChange(current) {
            this.messagePage.pageNo = current;
            this.tableLoading = true;
            this.getMessageList();
        },
        //时间戳格式化
        getDateTime(time) {
            let date = new Date(time);
            let year = date.getFullYear()
            let month = date.getMonth() + 1
            let day = date.getDate()
            let hour = date.getHours()
            let minute = date.getMinutes()
            let second = date.getSeconds()
            return `${year}-${month<10?'0':''}${month}-${day<10?'0':''}${day}
            ${hour<10?'0':''}${hour}:${minute<10?'0':''}${minute}:${second<10?'0':''}${second}`
        },
        //系统消息模板
        getList() {
            let params = {
                ...this.page,
                value: this.searchTextTemplate,
                sortord: this.sortord,
                types: this.types
            };
            getTemplateList(params)
            .then((res) => {
                if (res.code === 0) {
                    this.tableTemplateData = res.data.list;
                    this.pageTotal = res.data.total;
                    this.tableTemplateLoading = false;
                }
            })
            .catch((e) => {
                this.tableTemplateLoading = false;
            });
        },
         sizeChange(pageSize) {
            this.page.pageSize = pageSize;
            this.page.pageNo = 1;
            this.tableTemplateLoading = true;
            this.getList();
        },
        currentChange(current) {
            this.page.pageNo = current;
            this.tableTemplateLoading = true;
            this.getList();
        },
        searchChange() { // 普通消息 搜索
            this.messagePage.pageNo = 1;
            this.getMessageList()
        },
        reset() {
            this.searchText = ''
            this.messagePage.pageNo = 1;
            this.getMessageList()
        },
        withdrawForm(row) {
            withdrawAnnouncement(row.id).then((res) => {
                if(res.code ===0 ){
                    this.$modal.msgSuccess("撤回成功");
                    this.messagePage.pageNo = 1;
                    this.getMessageList()
                }
            })
        },
        delForm( row) { //普通消息 删除
            const that = this;
            this.$modal.confirm('是否确定删除！').then(function() {
                delAnnouncement(row.id).then(response => {
                    if(response.code ===0 ){
                        that.$modal.msgSuccess("删除成功");
                        that.messagePage.pageNo = 1;
                        that.getMessageList();
                    }
                })
            }).catch(() => {});
        },
        sizeSendChange(pageSize) {
            this.sendPage.pageSize = pageSize;
            this.sendPage.pageNo = 1;
            this.tableSendLoading = true;
            this.getSendList();
        },
        currentSendChange(current) {
            this.sendPage.pageNo = current;
            this.tableSendLoading = true;
            this.getSendList();
        },
        sendMessage() {
            this.messageTitle = "发送新消息"
            // this.$refs.announcement.$refs.basicForm.resetFields()
            this.showSendMessage = true
            this.detailsMessage = false
        },
        editForm(row) { //编辑消息
            this.editList = row
            this.messageTitle = "编辑消息"
            this.showSendMessage = true
            this.detailsMessage = false
        },
        editTemplateForm(row) {  //编辑消息模板
            this.templateEditList = row
            this.showSendTemplateMessage = true
            this.templateTitle = '编辑消息模板'
        },
        searchTemplateChange() {
            this.page.pageNo = 1;
            this.tableTemplateLoading = true;
            this.getList();
        },
        resetTemplate() {
            this.searchTextTemplate = ''
            this.page.pageNo = 1;
            this.tableTemplateLoading = true;
            this.getList();
        },
        sendTemplateMessage() {
            this.$refs.templateMessage.$refs.basicForm.resetFields()
            this.templateTitle = '新增消息模板'
            this.showSendTemplateMessage = true
        },
        componentReturnTable() { // 发送新消息返回
            this.showSendMessage = false
            this.editList = {
                type: '',
                recipientFilterType: 1,
                receiveMode: [ 1 ],
                sendAction: 0,
                sendTime: '',
                content: '',
                title: '',
                smsContent: ''
            }
        },
        componentTemplate() {
            this.showSendTemplateMessage = false
            this.templateEditList = {
                channel: [ 1 ],
                content: '',
                type: 0,
                title: '',
                smsContent: ''
            }
        },
        saveTemplate() {
            this.showSendTemplateMessage = false
            this.page.pageNo = 1;
            this.tableTemplateLoading = true;
            this.getList();
        },
        sendForm(row) {
            this.searchTextsend = ''
            this.sendPage.pageNo=1  
            this.sendPage.pageSize=10
            this.openMessage = true
            this.sendId = row.id
            this.getSendList()
        },
        getSendList() {
            this.tableSendLoading = true;
            let params = {
                ...this.sendPage,
                username: this.searchTextsend,
                announcementId: this.sendId
            };
           getAnnouncementSend(params).then((res) => {
               if (res.code === 0) {
                    this.tableDataSend = res.data.list;
                    this.sendpageTotal = res.data.total;
                    this.tableSendLoading = false;
               }
           })
        },
        resetSend() { //普通消息 -- 发送详情
            this.searchTextsend = ''
            this.searchChangeSend()
        },
        searchChangeSend() { //普通消息-- 发送详情 搜索
            this.sendPage.pageNo = 1;
            this.getSendList()
        },
        delSendForm(row) { // 普通消息 --  发送详情 -- 删除
            const that = this;
            this.$modal.confirm('是否确定删除！').then(function() {
                delSend(row.id).then(response => {
                    if(response.code ===0 ){
                        that.$modal.msgSuccess("删除成功");
                        that.getSendList();
                    }
                })
            }).catch(() => {});
        },
        sendTemplatForm(row) { //系统消息模板 -- 发送详情
            this.searchTextsendTemplate = ''
            this.sendDtailsId = row.id
            this.openTemplateMessage = true
            this.messageSendDtailsPage.pageSize = 10;
            this.messageSendDtailsPage.pageNo = 1;
            this.getSendListTemplate()
        },
        getSendListTemplate() {
            this.messageSendDtailsLoading = true;
            let params = {
                ...this.messageSendDtailsPage,
                username: this.searchTextsendTemplate,
                templateId: this.sendDtailsId
            };
           getTemplatePage(params).then((res) => {
               if (res.code === 0) {
                    this.messageSendDtailsData = res.data.list;
                    this.messageSendDtailsPageTotal = res.data.total;
                    this.messageSendDtailsLoading = false;
               }
           })
        },
        searchChangeTemplate() {
            this.messageSendDtailsPage.pageNo = 1;
            this.getSendListTemplate()
        },
        resetSendTemplate() { // 重置 --  模板 -- 消息发送详情
            this.searchTextsendTemplate = ''
            this.getSendListTemplate()
        },
        sizeSendDtailsChange(pageSize) {
            this.messageSendDtailsPage.pageSize = pageSize;
            this.messageSendDtailsPage.pageNo = 1;
            this.messageSendDtailsLoading = true;
            this.getSendListTemplate();
        },
        currentSendDtailsChange(current) {
            this.messageSendDtailsPage.pageNo = current;
            this.messageSendDtailsLoading = true;
            this.getSendListTemplate();
        },
        delTemplateForm( row) { //删除模板 消息发送详情
            const that = this;
            this.$modal.confirm('是否确定删除！').then(function() {
                delSend(row.id).then(response => {
                    if(response.code ===0 ){
                        that.$modal.msgSuccess("删除成功");
                        that.getSendListTemplate();
                    }
                })
            }).catch(() => {});
        },
    },
};
</script>
<style >
    .el-tooltip__popper{
        max-width:30%;
        padding-bottom: 5px!important;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 15;
        -webkit-box-orient: vertical;

    }
    .el-tooltip__popper,.el-tooltip__popper.is-dark{
        background:rgb(48, 65, 86) !important;
        color: #fff !important;
        line-height: 24px;
    }
</style>
